<template>
  <div class="atlas-box">
    <el-tooltip v-for="item in svgList" :key="item.type" class="box-item" effect="dark" :content="item.tooltip" placement="right">
      <svg-icon :icon-class="item.url" :class-name="item.name" @click="atlasChange(item.type)"></svg-icon>
    </el-tooltip>
    <transition name="el-fade-in-linear">
      <div class="layer-box" v-show="layerShow">
        <gas-tree></gas-tree>
      </div>
    </transition>
    <transition name="el-fade-in-linear">
      <div class="search-box" v-show="searchFlag">
        <gas-search></gas-search>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { useAtlasStore } from '@/store/modules/atlas';
import gasTree from '@/components/gasTree/index.vue';
import gasSearch from '@/components/gasSearch/index.vue';

const atlasStore = useAtlasStore();
const { layerShow, svgList, searchFlag } = storeToRefs(atlasStore);
const { atlasChange } = atlasStore;
</script>

<style lang="scss" scoped>
.atlas-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .layer-box {
    position: absolute;
    left: 97%;
    top: 40%;
    width: 20rem;
  }

  .search-box {
    position: absolute;
    left: 97%;
    top: 4%;
    width: 20rem;
  }

  .widget-image {
    width: 1.875rem;
    height: 1.25rem;
    margin: 0.375rem;
    cursor: pointer;
  }
}
</style>
